<template>
  <div class="app-container check">
    <mu-container>
      <mu-row>
        <mu-switch v-model="docked" style="margin-left: 16px" label="隐藏题库列表"></mu-switch>
      </mu-row>

      <question-list v-show="!docked" ref="questionList" @open="question = $event"></question-list>

      <mu-row>
        <mu-switch v-show="!docked" v-model="docked" style="margin-left: 16px" label="隐藏题库列表"></mu-switch>
      </mu-row>
    </mu-container>

    <question-examer v-if="question !== null" :question="question" @refresh="onRefresh()"></question-examer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import QuestionList from './QuestionList'
import QuestionExamer from './QuestionExamer'

export default {
  name: 'Check',
  components: {
    QuestionList,
    QuestionExamer
  },
  data() {
    return {
      question: null,
      docked: false,
      shouldRefresh: false
    }
  },
  computed: {
    ...mapGetters({
      types: 'types/options'
    })
  },
  methods: {
    onRefresh() {
      // 刷新列表
      this.$refs.questionList.fetch()
    }
  }
}
</script>

<style lang="scss">
.check {
  .check-actions-button {
    margin: 0 10px;
  }
}
</style>
